<template>
  <!-- 主体区域 -->
  <div style="margin-top: 40px">
    <!-- 文章搜索框 -->
    <search-bar @onSearch="search" ref="searchBar"></search-bar>
    <!-- 随笔区域 -->
    <div class="articles-area">
      <!-- 卡片区域 -->
      <el-card style="text-align: left">
        <!-- 一篇随笔 -->
        <div v-for="article in jotterList" :key="article.id">
          <!-- 随笔文字内容区域 -->
          <div style="float:left;width:85%;height: 150px">
            <!-- 标题链接，点击跳转到该随笔详情页面 -->
            <router-link class="article-link" :to="'/jotters/'+article.id">
              <span style="font-size: 20px">
                <strong>
                  {{article.articleTitle}}
                </strong>
              </span>
            </router-link>
            <span style="float:right; color: #179c5e">
              <!-- 随笔发布时间 -->
              {{article.articleAuthor}}
              <el-divider direction="vertical"></el-divider>
              {{article.articleDate}}
            </span>
            <!-- 摘要 -->
            <router-link class="article-link" :to="'/jotters/'+article.id">
              <p v-html="article.articleAbstract"></p>
            </router-link>
          </div>
          <!-- 随笔封面 -->
          <el-image style="margin:18px 0 0 30px;width:100px;height: 100px" :src="article.articleCover" fit="cover"></el-image>
          <!-- 分割线 -->
          <el-divider />
        </div>
      </el-card>
    </div>
    <!-- 分页 -->
    <el-pagination background layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange" :current-page="queryInfo.pageNum" :page-size="queryInfo.pageSize" :total="count" />
  </div>
</template>

<script>
import * as utils from "utils/index";
import SearchBar from "components/content/SearchBar";
export default {
  name: "Jotter",
  metaInfo: {
    title: "随笔",
  },
  data() {
    return {
      // 随笔列表
      jotterList: [],
      // 获取随笔列表的搜索对象
      queryInfo: {
        // 查询的参数，可为空
        query: "",
        // 当前页数
        pageNum: 1,
        // 每页的条目数
        pageSize: 4,
      },
      // 随笔总数量
      count: 0,
    };
  },
  components: {
    SearchBar,
  },
  created() {
    this.getJotterList();
  },
  methods: {
    // 获取一页随笔
    async getJotterList() {
      // 请求一页数据
      const { data: res } = await this.$http.get("admin/article", {
        params: {
          pageNum: this.queryInfo.pageNum,
          pageSize: this.queryInfo.pageSize,
        },
      });
      if (res.code !== 200) return this.$message.error("获取随笔列表出错");
      this.jotterList = res.data.articleList;
      this.jotterList.forEach(item => {
        item.articleDate = utils.parseTime(item.articleDate, "{y}-{m}-{d} {h}:{i}:{s}")
        console.log(item.articleDate)
      });
      this.count = res.data.count;
    },

    // 点击搜索框，搜索文章
    async search() {

      if(this.$refs.searchBar.keyword === "") return this.getJotterList();

      const { data: res } = await this.$http.get(
        "/admin/article/"+this.$refs.searchBar.keyword
      );

      if(res.code !== 200){
        this.count = 0;
        this.jotterList = []
        return;
      }
      this.count = res.data.count
      this.jotterList = res.data.articleList;
      this.jotterList.forEach(item =>{
        item.articleDate = utils.parseTime(item.articleDate, "{y}-{m}-{d} {h}:{i}:{s}")
      })
    },

    // 监听页码变化
    handleCurrentChange(currentPage) {
      this.queryInfo.pageNum = currentPage;
      this.getJotterList();
    },
  },
};
</script>

<style scoped>
.articles-area {
  width: 990px;
  min-height: 500px;
  margin-left: auto;
  margin-right: auto;
}

.article-link {
  text-decoration: none;
  color: #606266;
}

.article-link:hover {
  color: #409eff;
}
</style>
